<!DOCTYPE html>
<html>
<head>
	<title>移动端首页</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="format-detection" content="telephone =no">
	<link rel="stylesheet" href='css/common.css'>
	<link rel="stylesheet" href='css/index.css?v=20170616'>
	<link rel="stylesheet" href='css/swiper-3.4.2.min.css'>
	<script type="text/javascript" src="js/flexible.js"></script>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript" src="js/com_extend.js"></script>
	<script type="text/javascript" src="js/zepto.picLazyLoad.js"></script>
	<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js"></script>
</head>
<body>
<div class="container">
	<!--头部-->
	<header class="com_header">
		<a href="#" class="logo">
			<img src="images/logo.jpg">
		</a>
		<div class="search">
			<form>
				<label>
					<input type="text" class="search_inp" placeholder="请输入关键词">
					<input type="submit" class="sub" value="">
				</label>
			</form>
		</div>
		<a href="tel:40067878" class="tel"></a>
	</header>
	<!--主要内容-->
	<div class="index_con">
		<div class="index_show_top">
			<!--首页轮播-->
			<div class="index_banner">
				 <div class="swiper-container">
					  <div class="swiper-wrapper">
						  <a href="#" class="swiper-slide">
							 <img src="images/demo/index_banner.jpg">
						  </a>
						  <a href="#" class="swiper-slide">
							  <img src="images/demo/index_banner.jpg">
						  </a>
						  <a href="#" class="swiper-slide">
							  <img src="images/demo/index_banner.jpg">
						  </a>
					  </div>
					  <!-- 如果需要分页器 -->
					  <div class="swiper-pagination"></div>
				  </div>
			</div>
			<!--首页菜单-->
			<div class="index_menu">
				<a class="mlist" href="#">
					<i class="icon_1"></i>
					<span>全部商品</span>
				</a>
				<a class="mlist" href="#">
					<i class="icon_2"></i>
					<span>全屋定制</span>
				</a>
				<a class="mlist" href="#">
					<i class="icon_3"></i>
					<span>实体门店</span>
				</a>
				<a class="mlist" href="#">
					<i class="icon_4"></i>
					<span>免费报名</span>
				</a>
			</div>
			<div class="top_hot">
				<span class="tt">
					<img src="images/tj_logo.jpg">
				</span>
				<div class="hot_con">
					<ul class="top_hot_list">
						<li><span>热门</span><a href="#">换季收纳必备 最全衣柜选购指南</a></li>
						<li><span>热门</span><a href="#">换季收纳必备 最全衣柜选购指南</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="index_prd">
			<!--免费设计报名-->
			<div class="index_apply">
				<div class="index_quote">
					<img src="images/bj_icon.jpg">
				</div>
				<div class="index_free">
					<img src="images/free_icon.jpg">
				</div>
			</div>
			<!--热门活动-->
			<div class="show_part hot">
				<div class="part_tit">
					<span class="part_title">
						<b>热门活动</b>
						<i></i>
					</span>
					<a href="#" class="more">更多》</a>
				</div>
				<div class="part_hot swiper-hot">
					<ul class="part_hot_list swiper-wrapper">
						<li class="swiper-slide">
							<div class="hot_list_tit">
								<span class="top">
									<i></i>
									<em>衣柜工厂价</em>
								</span>
								<p>每店限量10套</p>
							</div>
							<a href="#" class="hot_img">
								<img src="images/demo/hot_1.jpg">
							</a>
						</li>
						<li class="swiper-slide">
							<div class="hot_list_tit">
								<span class="top rush">
									<i></i>
									<em>限量抢购</em>
								</span>
								<p>每店限量10套</p>
							</div>
							<a href="#" class="hot_img">
								<img src="images/demo/hot_1.jpg">
							</a>
						</li>
						<li class="swiper-slide">
							<div class="hot_list_tit">
								<span class="top">
									<i></i>
									<em>衣柜工厂价</em>
								</span>
								<p>每店限量10套</p>
							</div>
							<a href="#" class="hot_img">
								<img src="images/demo/hot_1.jpg">
							</a>
						</li>
						<li class="swiper-slide">
							<div class="hot_list_tit">
								<span class="top">
									<i></i>
									<em>衣柜工厂价</em>
								</span>
								<p>每店限量10套</p>
							</div>
							<a href="#" class="hot_img">
								<img src="images/demo/hot_1.jpg">
							</a>
						</li>
						<li class="swiper-slide">
							<div class="hot_list_tit">
								<span class="top">
									<i></i>
									<em>衣柜工厂价</em>
								</span>
								<p>每店限量10套</p>
							</div>
							<a href="#" class="hot_img">
								<img src="images/demo/hot_1.jpg">
							</a>
						</li>
						<li class="swiper-slide">
							<div class="hot_list_tit">
								<span class="top">
									<i></i>
									<em>衣柜工厂价</em>
								</span>
								<p>每店限量10套</p>
							</div>
							<a href="#" class="hot_img">
								<img src="images/demo/hot_1.jpg">
							</a>
						</li>
					</ul>
				</div>
			</div>
			<!--为您推荐-->
			<div class="show_part recommend">
				<div class="part_tit">
					<span class="part_title">
						<b>为您推荐</b>
						<i></i>
					</span>
					<a href="#" class="more">更多》</a>
				</div>  
				<div class="recommend_con">
					<div class="recommend_top">
						<div class="info" href="#">
							<span class="price">
								<i></i>
								<em>最高性价比</em>
							</span>
							<span class="name">洛基秋风橱柜</span>
							<a href="javascript:;" class="check">查看详情</a>
						</div>
						<div class="top_img">
							<img src="images/demo/tj_1.jpg">
						</div>
					</div>
					<div class="recommend_bottom">
						<div class="bottom_list">
							<a href="#">
								<img src="images/demo/tj_2.jpg">
							</a>
							<p class="title">
								<i>NEW</i>
								<span>新品推荐</span>
							</p>
							<p class="descri">时光倒影橱柜</p>
						</div>
						<div class="bottom_list">
							<a href="#">
								<img src="images/demo/tj_2.jpg">
							</a>
							<p class="title">
								<i>HOT</i>
								<span>热门活动</span>
							</p>
							<p class="descri">时光倒影橱柜</p>
						</div>
						<div class="bottom_list">
							<a href="#">
								<img src="images/demo/tj_2.jpg">
							</a>
							<p class="title">
								<i>NEW</i>
								<span>新品推荐</span>
							</p>
							<p class="descri">时光倒影橱柜</p>
						</div>
					</div>
				</div>
			</div>
			<!--风格速递-->
			<div class="show_part style">
				<div class="part_tit">
					<span class="part_title">
						<b>风格速递</b>
						<i></i>
					</span>
					<a href="#" class="more">更多》</a>
				</div>
				<div class="style_con">
					<div class="style_con_l">
						<div class="style_tit">
							<b>魔法森林厨柜</b>
							<p>魔变空间 发挥无限可能</p>
						</div>
						<a href="#" class="style_l_ad1">
							<img src="images/demo/sd_l1.jpg" title="">
						</a>
					</div>
					<div class="style_con_r">
						<div class="style_r_top">
							<div class="style_tit">
								<b>魔法森林</b>
								<p>魔变空间发</p>
							</div>
							<a href="#" class="style_r_ad1">
								<img src="images/demo/sd_r1.jpg" title="">
							</a>
						</div>
						<div class="style_r_bottom">
							<div class="style_tit">
								<b>魔法森林</b>
								<p>魔变空间发</p>
							</div>
							<a href="#" class="style_r_ad2">
								<img src="images/demo/sd_r2.jpg" title="">
							</a>
						</div>
					</div>
				</div>
			</div>
			<!--功能定制-->
			<div class="show_part book">
				<div class="part_tit">
					<span class="part_title">
						<b>功能定制</b>
						<i></i>
					</span>
					<a href="#" class="more">更多》</a>
				</div>
				<div class="book_list">
					<a>
						<img src="images/demo/book_ban.jpg" title="">
						<span>实用美观兼备</span>
					</a>
					<a>
						<img src="images/demo/book_ban.jpg" title="">
						<span>实用美观兼备</span>
					</a>
					<a>
						<img src="images/demo/book_ban.jpg" title="">
						<span>实用美观兼备</span>
					</a>
					<a>
						<img src="images/demo/book_ban.jpg" title="">
						<span>实用美观兼备</span>
					</a>
					<a>
						<img src="images/demo/book_ban.jpg" title="">
						<span>实用美观兼备</span>
					</a>
					<a>
						<img src="images/demo/book_ban.jpg" title="">
						<span>实用美观兼备</span>
					</a>
				</div>
			</div>
			<!--全屋设计-->
			<div class="show_part house">
				<div class="part_tit">
					<span class="part_title">
						<b>全屋设计</b>
						<i></i>
					</span>
					<a href="#" class="more">更多》</a>
				</div>
				<div class="house_list">
					<div class="house_left">
						<div class="house_left_tit">
							<span class="design_t"><img src="images/design_t.jpg"></span>
							<div class="designer">
			   	 				<span class="photo fl">
			   	 					<img src="http://img1.pianor.com/other/2017/06/01/2017060115354525197.png">
			   	 				</span>
			   	 				<span class="tab fl">
			   	 					<i class="fl"></i>
			   	 					<span class="tab_n">金牌设计师</span>
			   	 					<b class="name">盘创洪</b>
			   	 					<span class="tab_q fl">
			   	 						<b>解决问题：</b>
										增加空间收纳
									</span>
			   	 				</span>
			   	 			</div>
			   	 			<span class="design_img"><img src="images/demo/design.jpg"></span>
			   	 			<ul class="house_info_list">
			   	 				<li>
			   	 					<i class="icon_1"></i>
			   	 					<span>
			   	 						<b>楼盘： </b>
			   	 						<em>恒大山水城</em>
			   	 					</span>
			   	 				</li>
			   	 				<li>
			   	 					<i class="icon_2"></i>
			   	 					<span>
			   	 						<b>户型： </b>
			   	 						<em>三房两厅105m2</em>
			   	 					</span>
			   	 				</li>
			   	 				<li>
			   	 					<i class="icon_3"></i>
			   	 					<span>
			   	 						<b>户型： </b>
			   	 						<em>约5.6W</em>
			   	 					</span>
			   	 				</li>
			   	 			</ul>
						</div>
					</div>
					<div class="house_right">
						<div class="house_right_l">
							<a href="#" class="img_ad_1">
								<img src="images/demo/house_r1.jpg" title="">
							</a>
							<a href="#" class="img_ad_2">
								<img src="images/demo/house_r2.jpg" title="">
							</a>
							<a href="#" class="img_ad_3">
								<img src="images/demo/house_r3.jpg" title="">
							</a>
						</div>
						<div class="house_right_r">
							<a href="#" class="img_ad_4">
								<img src="images/demo/house_r4.jpg" title="">
							</a>
							<a href="#" class="img_ad_5">
								<img src="images/demo/house_r5.jpg" title="">
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--尾部-->
	<footer class="com_footer">
		<div class="footer_info_top">
			<span class="link">
				<a href="#">关于我们</a>
				|
				<a href="#">定制流程</a>
				|
				<a href="#">联系客服</a>
			</span>
			<address>
				<p>广东皮阿诺科学艺术家居股份有限公司</p>
				<p>联系电话：<span>400-6787-819</span></p>
			</address>
		</div>
		<div class="footer_info_bottom">
			<p>
				<a href="#">触屏版</a> 
				<a href="#">电脑版</a>  
			</p>
			<p>粤ICP备05019711号© 2012-2017</p>
		</div>
		<!--底部导航-->
		<nav class="com_nav">
			<div>
				<a href="javascript:;">
					<i class="icon_1"></i>
					<span>首页</span>
				</a>
			</div>
			<div>
				<a href="javascript:;">
					<i class="icon_2"></i>
					<span>分类</span>
				</a>
			</div>
			<div>
				<a href="javascript:;">
					<i class="icon_3"></i>
					<span>在线咨询</span>
				</a>
			</div>
			<div >
				<a href="javascript:;">
					<i class="icon_4"></i>
					<span>免费设计报名</span>
				</a>
			</div>
		</nav>
	</footer>
</div>
</body>
</html>
<script type="text/javascript">
var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    // 如果需要分页器
    pagination: '.swiper-pagination',
  })   
var hotSwiper = new Swiper ('.swiper-hot', {
        slidesPerView: 2.5,
        paginationClickable: true,
        spaceBetween: 30,
        freeMode: true
  })   
</script>